<template>
  <!-- 标的要素 -->
  <div class="pb-[15px] px-[15px] text-[14px]">
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        name="项目名称"
        label="工程名称"
        placeholder="请输入工程名称"
        :rules="[{ required: true, message: '请输入工程名称' }]"
        v-model="Info.name"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        @update:model-value="inputChange"
        type="digit"
        :disabled="!edit"
        label-class="label"
        v-model="Info.price"
        name="工程造价(元)"
        label="工程造价(元)"
        placeholder="请输入设备造价"
        :rules="[{ required: true, message: '请输入工程造价' }]"
      />
    </div>
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.area_num"
        name="项目面积(平方)"
        label="项目面积(平方)"
        @update:model-value="inputChange"
        placeholder="请输入项目面积"
        :rules="[{ required: true, message: '请输入项目面积' }]"
      />
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.code"
        name="项目编号"
        label="项目编号"
        placeholder="请输入项目编号"
        :rules="[{ required: true, message: '请输入项目编号' }]"
      />
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.address"
        name="工地地址"
        label="工地地址"
        placeholder="请输入工地地址"
        :rules="[{ required: true, message: '请输入工地地址' }]"
      />
    </div> -->
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">工地地址</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(2)">
        <div class="text-[#c8c9cc] text-[14px]">
          {{ addressName ? addressName : "请选择工地地址" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>

    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.address"
        name="施工详细地址"
        label="施工详细地址"
        placeholder="请输入XX省XX市XX区XX路XX某商场"
        :rules="[{ required: true, message: '请输入XX省XX市XX区XX路XX某商场' }]"
      />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.room_no"
        name="铺位号"
        label="铺位号"
        placeholder="请输入铺位号、具体点位或店铺名称"
      />
    </div>
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">活动类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(3)">
        <div class="text-[#c8c9cc] text-[14px]">
          {{ Info.active_type ? Info.active_type : "请选择活动类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->

    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.num"
        name="人员人数"
        label="人员人数"
        placeholder="请输入人员人数"
        :rules="[{ required: true, message: '请输入人员人数' }]"
      />
    </div> -->
    <!-- <div class="mt-[10px] text-red-500">不超过50人</div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.age"
        name="工期"
        label="工期"
        @update:model-value="inputChange"
        @blur="inputBlur"
        placeholder="请选择工期"
      />
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">开始时间</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop(0)"
      >
        <div class="text-[14px]" :class="edit ? '' : 'text-[#c8c9cc]'">
          {{
            Info.start_date
              ? Info.start_date + " 00:00:00"
              : year + "-" + month + "-" + strDate + " 00:00:00"
          }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div
      class="border-b border-[#ECECEC] py-[15px] flex items-center text-[#c8c9cc]"
    >
      <div class="text-[14px] min-w-[100px]">结束时间</div>
      <div class="ml-[10px] flex justify-between items-center w-full">
        <div class="text-[14px]" :class="edit ? '' : 'text-[#c8c9cc]'">
          {{ Info.end_date ? Info.end_date + " 23:59:59" : "请选择时间" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="route.query.id == '2'"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.structure"
        name="房屋建筑结构"
        label="房屋建筑结构"
        placeholder="请输入房屋建筑结构"
        :rules="[{ required: true, message: '请输入房屋建筑结构' }]"
      />
    </div> -->
    <!-- <div
      class="border-b border-[#ECECEC] py-[15px]"
      v-if="route.query.id == '2'"
    >
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.area_num"
        name="施工面积"
        label="施工面积"
        placeholder="请输入施工面积"
        :rules="[{ required: true, message: '请输入施工面积' }]"
      />
    </div> -->

    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">详细施工地址</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPicker('详细施工地址')"
      >
        <div class="text-[#c8c9cc] text-[14px]">
          {{ Info.address ? Info.address : "请选择详细施工地址" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="Info.room_no"
        name="商铺号/房间号"
        label="商铺号/房间号"
        placeholder="请输入商铺号/房间号"
        :rules="[{ required: true, message: '请输入商铺号/房间号' }]"
      />
    </div> -->
    <!-- <div class="py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">保障方案</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPicker('保障方案')"
      >
        <div class="text-[#c8c9cc] text-[14px]">
          {{ name ? name : "请选择" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="text-[12px] py-[15px]">
      注：本方案
      <span class="text-[#F00505]">不承保黑龙江、吉林、辽宁、河南</span>
      等四省所在区域的工程
    </div> -->
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        :title="popTitle"
        :columns="columns"
        :columns-field-names="{ text: 'name', value: 'id' }"
        @confirm="onConfirm"
        @cancel="show = false"
      />
    </van-popup>
  </div>
  <div>
    <van-popup v-model:show="isPopup" position="bottom" round :style="{ height: '40%' }">
      <van-date-picker
        title="选择日期"
        :filter="filter"
        v-model="currentDate"
        @confirm="confirmBtn"
        @change="pickerChnage"
        @cancel="isPopup = false"
      />
      <!-- <van-area
        title="选择地址"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmBtn"
      /> -->
    </van-popup>
  </div>
  <div>
    <van-popup
      v-model:show="isAreaPop"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <van-area
        title="选择地址"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmArea"
        @cancel="isAreaPop = false"
      />
    </van-popup>
  </div>
  <div>
    <van-popup
      v-model:show="isActiveType"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <van-picker
        title="选择活动类型"
        :columns="activeList"
        :columns-field-names="{ text: 'name', value: 'name' }"
        @confirm="confirmActive"
        @cancel="isActiveType = false"
      />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import {
  reactive,
  ref,
  defineProps,
  watchEffect,
  defineExpose,
  computed,
  defineEmits,
} from "vue";
// import { areaList } from "@vant/area-data";
import { homeGetAddress, getArea } from "@/utils/api";
// import { useRoute } from "vue-router";
// console.log(areaList);

const props = defineProps({
  Info: { type: Object },
  edit: { type: Boolean },
});
const currentDate = computed(() => {
  return getDate();
});
const emit = defineEmits(["pickerConfirm", "inputChange"]);
const filterYear = ref();
const filterMonth = ref();
const filterDay = ref();
const year = ref<any>();
const month = ref<any>();
const strDate = ref<any>();
const dateIndex = ref<number>();
const Info = reactive<treetopType>({
  name: "",
  price: "",
  area_num: "",
  province: "",
  city: "",
  area: "",
  start_date: "",
  end_date: "",
  province_code: "",
  city_code: "",
  area_code: "",
  address: "",
  active_type: "",
  room_no: "",
});
const isActiveType = ref(false);
const areaList = ref();
const isPopup = ref(false);
const isAreaPop = ref(false); //地址弹框
const popTitle = ref("");
const columns = ref([] as any);
const show = ref(false);
// const name = ref<string>("");
const addressList = ref([]);
const addressName = ref(""); //项目所在地
const activeList = ref([
  { name: "商场内或商场区域广场节假日展销活动" },
  { name: "小型的装饰工程" },
  {
    name: "在中小学、大中专院校内、酒店、公园、体育场馆或公司封闭区域内举办的活动",
  },
  { name: "常规低风险赛事，不含竞技类、竞速类、专业赛事等活动" },
  { name: "年会、展销等活动。" },
]);

//输入框改变触发
const inputChange = (v: any) => {
  emit("inputChange", v);
};
//失去焦点触发
// const inputBlur = () => {};
const filter = (type: any, options: any) => {
  if (type == "year") {
    return options.filter(
      (option: any) => Number(option.value) >= new Date().getFullYear()
    );
  }
  if (type == "day") {
    return filterDayDate(options);
  }
  if (type == "month") {
    return filterMonthDate(options);
  }

  return options;
};
//过滤月份
const filterMonthDate = (options: any) => {
  if (filterYear.value == new Date().getFullYear()) {
    return options.filter(
      (option: any) => Number(option.value) >= new Date().getMonth() + 1
    );
  } else {
    return options;
  }
};
//过滤天数
const filterDayDate = (options: any) => {
  if (
    filterMonth.value == new Date().getMonth() + 1 &&
    filterYear.value == new Date().getFullYear()
  ) {
    return options.filter(
      (option: any) => Number(option.value) >= new Date().getDate() + 1
    );
  } else {
    return options;
  }
};
const pickerChnage = (value: any) => {
  filterYear.value = value.selectedValues[0];
  filterMonth.value = value.selectedValues[1];
  filterDay.value = value.selectedValues[2];
};
//获取当前时间
const getDate = () => {
  let date = new Date();
  filterYear.value = date.getFullYear();
  filterMonth.value = date.getMonth() + 1;
  year.value = date.getFullYear(); //获取完整的年份(4位)
  month.value = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  month.value = month.value < 10 ? "0" + month.value : month.value;
  strDate.value = date.getDate() + 1; // 获取当前日(1-31)
  strDate.value = strDate.value < 10 ? "0" + strDate.value : strDate.value;

  let data = [`${year.value}`, `${month.value}`, `${strDate.value}`];

  return data;
};
getDate();
// const getInfo = () => {
//   let key: keyof treetopType;
//   if (JSON.parse(sessionStorage.getItem("insure") as string)) {
//     for (key in Info) {
//       if (JSON.parse(sessionStorage.getItem("insure") as string).treetop[key]) {
//         Info[key] = JSON.parse(
//           sessionStorage.getItem("insure") as string
//         ).treetop[key];
//         console.log(Info[key]);
//       }
//     }
//   }
// };
// getInfo();
watchEffect(() => {
  if (props?.Info?.treetop !== undefined) {
    let key: keyof treetopType;
    for (key in Info) {
      if (props?.Info?.treetop[key]) {
        Info[key] = props?.Info?.treetop[key];
      }
    }
    // console.log(Info);

    // Info.classify = "室内装修";
    // name.value = props?.Info?.treetop.fanan as string;
    if (props?.Info?.treetop.province) {
      addressName.value =
        props?.Info?.treetop.province +
        "-" +
        props?.Info?.treetop.city +
        "-" +
        props?.Info?.treetop.area;
    }
  }
});
// const route = useRoute();

//获取详细地址
const getAddress = async () => {
  const res = await homeGetAddress("");
  addressList.value = res.msg;
  let address = await getArea("");
  areaList.value = address.msg;
};
getAddress();
const onConfirm = (selectedValues: any) => {
  if (popTitle.value == "保障方案") {
    // name.value = selectedValues.selectedOptions[0].name;
    Info.fanan = selectedValues.selectedOptions[0].name;
  } else {
    Info.address = selectedValues.selectedOptions[0].name;
    Info.address_id = selectedValues.selectedOptions[0].id;
  }

  show.value = false;
};
//选择活动类型
const confirmActive = (res: any) => {
  Info.active_type = res.selectedValues[0];
  isActiveType.value = false;
};
//打开弹框
// const openPicker = (title: string) => {
//   if (!props.edit) return;
//   popTitle.value = title;
//   columns.value = [];
//   if (title == "保障方案") {
//     bzFun();
//   } else {
//     addressList.value.forEach((item: any) => {
//       let param = {
//         name: item.address,
//         id: item.id,
//       };
//       columns.value.push(param);
//     });
//     console.log(columns.value);
//   }
//   show.value = true;
// };
//保障方案数组的获取
// const bzFun = () => {
//   if (route.query.order_id) {
//     //回显数据const
//     props?.Info?.bx_info?.fanan.forEach((item: any) => {
//       let param = {
//         name: item.name,
//         id: item.name,
//       };
//       columns.value.push(param);
//     });
//   } else {
//     props?.Info?.fanan.forEach((item: any) => {
//       let param = {
//         name: item.name,
//         id: item.name,
//       };
//       columns.value.push(param);
//     });
//   }
// };
const confirmBtn = (res: any, _: number) => {
  // console.log(res, index);

  if (dateIndex.value == 0) {
    // 开始时间
    Info.start_date =
      res.selectedOptions[0].text +
      "-" +
      res.selectedOptions[1].text +
      "-" +
      res.selectedOptions[2].text;
  } else if (dateIndex.value == 1) {
    // 结束时间
    Info.end_date =
      res.selectedOptions[0].text +
      "-" +
      res.selectedOptions[1].text +
      "-" +
      res.selectedOptions[2].text;
  }
  emit("pickerConfirm", res, dateIndex.value);
  isPopup.value = false;
};
//确认选择地址
const confirmArea = (res: any) => {
  Info.province = res.selectedOptions[0].text;
  Info.city = res.selectedOptions[1].text;
  Info.area = res.selectedOptions[2].text;
  Info.province_code = res.selectedOptions[0].value;
  Info.city_code = res.selectedOptions[1].value;
  Info.area_code = res.selectedOptions[2].value;
  isAreaPop.value = false;
  addressName.value = Info.province + "-" + Info.city + "-" + Info.area;
};
//打开项目所在地
const openPop = (index?: number) => {
  //0是开始时间 1是结束时间 3是活动类型
  dateIndex.value = index;
  if (!props.edit) return;

  if (index == 0 || index == 1) {
    isPopup.value = true;
  }
  if (index == 2) {
    isAreaPop.value = true;
  }
  if (index == 3) {
    isActiveType.value = true;
  }
};
defineExpose({
  Info,
});
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}

:deep(.label) {
  color: black !important;
}
</style>
